{% extends "page.html.twig" %}

{% do gantry.theme.setLayout('default') %}

{% block content %}
    <div class="g-grid">
        <div class="g-block">
            <div class="g-content">
                <h2>Headings</h2>
                <p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p>
                <div>
                    <h1>h1. Heading 1</h1>
                    <h2>h2. Heading 2</h2>
                    <h3>h3. Heading 3</h3>
                    <h4>h4. Heading 4</h4>
                    <h5>h5. Heading 5</h5>
                    <h6>h6. Heading 6</h6>
                </div>
            </div>
        </div>

        <div class="g-block">
            <div class="g-content">
                <h2>Emphasis</h2>
                <h4><code>&lt;em&gt;</code></h4>
                <p>For emphasizing a snippet of text with <em>stress</em></p>
                <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
                <pre class="prettyprint">&lt;em&gt;rendered as italicized text&lt;/em&gt;</pre>
                <h4><code>&lt;strong&gt;</code></h4>
                <p>For emphasizing a snippet of text with <strong>important</strong></p>
                <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
                <pre class="prettyprint">&lt;strong&gt;rendered as bold text&lt;/strong&gt;</pre>
                <h4><code>&lt;small&gt;</code></h4>
                <p>For de-emphasizing inline or blocks of text, <small>use the small tag.</small></p>
                <p><small>This line of text is meant to be treated as fine print.</small></p>
            </div>
        </div>
    </div>

    <div class="g-grid">
        <div class="g-block">
            <div class="g-content">
                <h2>Notice Styles</h3>
                <p class="success">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                <pre class="prettyprint">&lt;p class="success"&gt;...&lt;/p&gt;</pre>
                <p class="info">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                <pre class="prettyprint">&lt;p class="info"&gt;...&lt;/p&gt;</pre>
                <p class="warning">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                <pre class="prettyprint">&lt;p class="warning"&gt;...&lt;/p&gt;</pre>
                <p class="error">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                <pre class="prettyprint">&lt;p class="error"&gt;...&lt;/p&gt;</pre>
            </div>
        </div>
    </div>

    <div class="g-grid">
        <div class="g-block">
            <div class="g-content">
                <h2>Abbreviations</h2>
                <p>Stylized implementation of HTML's <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.</p>

                <h4><code>&lt;abbr&gt;</code></h4>
                <p>For expanded text on long hover of an abbreviation, include the <code>title</code> attribute.</p>
                <div class="gantry-example">
                    <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
                </div>
                <pre class="prettyprint">&lt;abbr title="attribute"&gt;attr&lt;/abbr&gt;</pre>
            </div>
        </div>
        <div class="g-block">
            <div class="g-content">
                <h2>Addresses</h2>
                <p>Stylized implementation of HTML's element to present contact information for the nearest ancestor or the entire body of work.</p>
                <h4><code>&lt;address&gt;</code></h4>
                <p>Preserve formatting by ending all lines with <code>&lt;br&gt;</code>.</p>
                <address>
                    <strong>Twitter, Inc.</strong><br/>
                    795 Folsom Ave, Suite 600<br/>
                    San Francisco, CA 94107<br/><abbr title="Phone">P:</abbr> (123) 456-7890
                </address>
                <address>
                    <strong>Full Name</strong><br/><a href="mailto:#"><span id="cloak45941">This email address is being protected from spambots. You need JavaScript enabled to view it.</span><script type="text/javascript">
                            //<!--
                            document.getElementById('cloak45941').innerHTML = '';
                            var prefix = '&#109;a' + 'i&#108;' + '&#116;o';
                            var path = 'hr' + 'ef' + '=';
                            var addy45941 = 'f&#105;rst.l&#97;st' + '&#64;';
                            addy45941 = addy45941 + 'gm&#97;&#105;l' + '&#46;' + 'c&#111;m';
                            document.getElementById('cloak45941').innerHTML += '<a ' + path + '\'' + prefix + ':' + addy45941 + '\'>' +addy45941+'<\/a>';
                            //-->
                        </script></a>
                </address>
<pre class="prettyprint linenums">
&lt;address&gt;
  &lt;strong&gt;Twitter, Inc.&lt;/strong&gt;&lt;br&gt;
  795 Folsom Ave, Suite 600&lt;br&gt;
  San Francisco, CA 94107&lt;br&gt;
  &lt;abbr title="Phone"&gt;P:&lt;/abbr&gt; (123) 456-7890
&lt;/address&gt;
&lt;address&gt;
  &lt;strong&gt;Full Name&lt;/strong&gt;&lt;br&gt;
  &lt;a href="mailto:#"&gt;first.last@gmail.com&lt;/a&gt;
&lt;/address&gt;
</pre>
            </div>
        </div>
    </div>
    
    <div class="g-grid">
        <div class="g-block">
            <div class="g-content">
                <h2>Blockquotes</h2>
                <p>For quoting blocks of content from another source within your document.</p>
                <h3>Default blockquote</h3>
                <p>Wrap <code>&lt;blockquote&gt;</code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes we recommend a <code>&lt;p&gt;</code>.</p>
                <blockquote>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                </blockquote>
<pre class="prettyprint linenums">&lt;blockquote&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt;
&lt;/blockquote&gt;</pre>

                <h3>Blockquote options</h3>
                <span>Style and content changes for simple variations on a standard blockquote.</span><br/>

                <h4>Naming a source</h4>
                <p>Add <code>&lt;small&gt;</code> tag for identifying the source. Wrap the name of the source work in <code>&lt;cite&gt;</code>.</p>
                    <blockquote>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                        <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
                    </blockquote>
<pre class="prettyprint linenums">&lt;blockquote&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt;
  &lt;small&gt;Someone famous &lt;cite title="Source Title"&gt;Source Title&lt;/cite&gt;&lt;/small&gt;
&lt;/blockquote&gt;</pre>
            </div>
        </div>
    </div>
    
    <div class="g-grid">
        <div class="g-block">
            <div class="g-content">
                <h2>Code</h2>
                <h4>Inline</h2>
                <p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
                For example, <code>&lt;section&gt;</code> should be wrapped as inline.
                <pre class="prettyprint linenums">For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inline.</pre>
                <p><strong>Note:</strong> Be sure to keep code within <code>&lt;pre&gt;</code> tags as close to the left as possible; it will render all tabs.</p>
            </div>
        </div>
        <div class="g-block">
            <div class="g-content">
                <h4>Basic block</h2>
                    <p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
                    <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
<pre class="prettyprint linenums" style="margin-bottom: 9px;">&lt;pre&gt;
  &amp;lt;p&amp;gt;Sample text here...&amp;lt;/p&amp;gt;
&lt;/pre&gt;</pre>
            </div>
        </div>
    </div>

    <div class="g-grid">
        <div class="g-block">
            <div class="g-content">
                <h2>Tables</h2>
                <table>
                    <thead><tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                    </tr></thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Larry</td>
                        <td>the Bird</td>
                        <td>@twitter</td>
                    </tr>
                    </tbody>
                </table>
<pre class="prettyprint linenums">&lt;table class="table"&gt;
  …
&lt;/table&gt;</pre>
            </div>
        </div>
    </div>

    <div class="g-grid">
        <div class="g-block">
            <div class="g-content">
                <h2>Forms</h2>
                <p>Individual form controls receive styling, but without any required base class on the <code>&lt;form&gt;</code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.</p>
                <form>
                    <fieldset>
                        <legend>Legend</legend>
                        <label>Label name</label>
                        <input type="text" placeholder="Type something…"/><span class="help-block">Example block-level help text here.</span>
                        <label class="checkbox">
                            <input type="checkbox"/> Check me out
                        </label>
                        <button type="submit" class="btn">Submit</button>
                    </fieldset>
                </form>

<pre class="prettyprint linenums">&lt;form&gt;
  &lt;legend&gt;Legend&lt;/legend&gt;
  &lt;label&gt;Label name&lt;/label&gt;
  &lt;input type="text" placeholder="Type something…"&gt;
  &lt;span class="help-block"&gt;Example block-level help text here.&lt;/span&gt;
  &lt;label class="checkbox"&gt;
    &lt;input type="checkbox"&gt; Check me out
  &lt;/label&gt;
  &lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt;
&lt;/form&gt;</pre>
            </div>
        </div>
    </div>

    <div class="g-grid">
        <div class="g-block">
            <div class="g-content">
                <h4>Inputs</h3>
                <p>Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.</p>
                <p>Requires the use of a specified <code>type</code> at all times.</p>
                <form class="form-inline">
                    <input type="text" placeholder="Text input"/>
                </form>
                <pre class="prettyprint linenums">&lt;input type="text" placeholder="Text input"&gt;</pre>

                <h4>Textarea</h3>
                <p>Form control which supports multiple lines of text. Change <code>row</code> attribute as necessary.</p>
                <form class="form-inline">
                    <textarea rows="3"></textarea>
                </form>
                <pre class="prettyprint linenums">&lt;textarea rows="3"&gt;&lt;/textarea&gt;</pre>

                <h4>Checkboxes and radios</h3>
                <p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p>
                <h4>Default (stacked)</h4>
                <form>
                    <label class="checkbox">
                        <input type="checkbox" value=""/>
                        Option one is this and that—be sure to include why it's great
                    </label>
                    <br/><label class="radio">
                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                        Option one is this and that—be sure to include why it's great
                    </label>
                    <label class="radio">
                        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"/>
                        Option two can be something else and selecting it will deselect option one
                    </label>
                </form>
<pre class="prettyprint linenums">&lt;label class="checkbox"&gt;
  &lt;input type="checkbox" value=""&gt;
  Option one is this and that—be sure to include why it's great
&lt;/label&gt;

&lt;label class="radio"&gt;
  &lt;input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked&gt;
  Option one is this and that—be sure to include why it's great
&lt;/label&gt;
&lt;label class="radio"&gt;
  &lt;input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"&gt;
  Option two can be something else and selecting it will deselect option one
&lt;/label&gt;</pre>

            <h4>Inline checkboxes</h4>
            <p>Add the <code>.inline</code> class to a series of checkboxes or radios for controls appear on the same line.</p>
            <form>
                <label class="checkbox inline">
                    <input type="checkbox" id="inlineCheckbox1" value="option1"/> 1
                </label>
                <label class="checkbox inline">
                    <input type="checkbox" id="inlineCheckbox2" value="option2"/> 2
                </label>
                <label class="checkbox inline">
                    <input type="checkbox" id="inlineCheckbox3" value="option3"/> 3
                </label>
            </form>
<pre class="prettyprint linenums">&lt;label class="checkbox inline"&gt;
  &lt;input type="checkbox" id="inlineCheckbox1" value="option1"&gt; 1
&lt;/label&gt;
&lt;label class="checkbox inline"&gt;
  &lt;input type="checkbox" id="inlineCheckbox2" value="option2"&gt; 2
&lt;/label&gt;
&lt;label class="checkbox inline"&gt;
  &lt;input type="checkbox" id="inlineCheckbox3" value="option3"&gt; 3
&lt;/label&gt;</pre>

            <h4>Selects</h3>
            <p>Use the default option or specify a <code>multiple="multiple"</code> to show multiple options at once.</p>
            <form>
                <select><option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option></select><br/><select multiple><option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option></select>
            </form>
<pre class="prettyprint linenums">&lt;select&gt;
  &lt;option&gt;1&lt;/option&gt;
  &lt;option&gt;2&lt;/option&gt;
  &lt;option&gt;3&lt;/option&gt;
  &lt;option&gt;4&lt;/option&gt;
  &lt;option&gt;5&lt;/option&gt;
&lt;/select&gt;

&lt;select multiple="multiple"&gt;
  &lt;option&gt;1&lt;/option&gt;
  &lt;option&gt;2&lt;/option&gt;
  &lt;option&gt;3&lt;/option&gt;
  &lt;option&gt;4&lt;/option&gt;
  &lt;option&gt;5&lt;/option&gt;
&lt;/select&gt;</pre>
            </div>
        </div>
    </div>

    <div class="g-grid">
        <div class="g-block">
            <div class="g-content">
                <h2>Buttons</h2>
                <form>
                    <a class="button" href="#">Link</a>
                    <button class="button" type="submit">Button</button>
                    <input class="button" type="button" value="Input"/>
                    <input class="button" type="submit" value="Submit"/>
                </form>
<pre class="prettyprint linenums">&lt;a class="button" href=""&gt;Link&lt;/a&gt;
&lt;button class="button" type="submit"&gt;Button&lt;/button&gt;
&lt;input class="button" type="button" value="Input"&gt;
&lt;input class="button" type="submit" value="Submit"&gt;</pre>
            </div>
        </div>
    </div>

{% endblock %}
